<div *ngIf="criteria" class="row">
    <div class="col-md-3" id="menuGroup">

        <!-- START: search criteria  -->
        <div class="mb-3">
            <input type="text"
                class="form-control search-input"
                placeholder="Search Criteria"
                [(ngModel)]="term"
                (keyup)="search()"
                (focus)="found = searchResults && searchResults.length > 0"
                (blur)="focusOut($event)">

            <ul id="searchGroup" *ngIf="found" class="searchContainer">
                <li *ngFor="let elem of searchResults">
                    <a href="javascript:;" (click)="navigateToCriteria(elem.level1, elem.level2, elem.id, elem.shortName, elem.name)">{{elem.name}}</a>
                </li>
            </ul>
        </div>
        <!-- END: search criteria  -->

        <ul class="list-group list-group-flush" id="criteriaAccordion">
            <li *ngFor="let item of criteria" class="list-group-item item-link criteria-menu-item bg-light-grey">
                <div class="d-flex align-items-center main-item" [attr.id]="'criteria'+item.id">
                    <a *ngIf="item.active" class="mr-auto" href="javascript:;;" [attr.data-target]="'#'+item.id" aria-expanded="false" [attr.aria-controls]="item.id" (click)="showLevel(item.id)">{{ item.name }}</a>
                    <span *ngIf="!item.active" class="mr-auto">{{ item.name }}</span>
                    <i *ngIf="!item.active" class="ti-lock ml-auto"></i>
                </div>

                <div class="collapse pb-2" [ngClass]="{'show': level1 == item.id}" [attr.id]="item.id" [attr.aria-labelledby]="'criteria'+item.id" data-parent="#criteriaAccordion">
                    <div class="submenu">
                        <span *ngFor="let child of item.childItems">
                            <a [routerLink]="[{ outlets: { criteria: [edit, 'level1', child.criteriaLevel1Id, 'level2', child.id]} } ]"
                                [ngClass]="{'active': child.id == level2}" (click)="level2 = child.id">{{ child.name }}</a>
                            <!-- TODO: show only if we have enabled criteria templates  -->
                            <span *ngIf="type == targetType.Report && level2 == child.id" class="active">
                                <input type="checkbox" (change)="selectAll($event, child.criteriaLevel1Id)" [disabled]="criteriaAvailable == false"/> Select All
                            </span>
                        </span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="col-md-9">
        <div class="container criteria-container">
            <router-outlet name="criteria"></router-outlet>
        </div>
    </div>
</div>

<div *ngIf="selectedCriteriaSummary && selectedCriteriaSummary.length > 0" class="mt-5">
    <h5>Selected Criteria</h5>
    <div *ngFor="let summary of selectedCriteriaSummary" (click)="removeCriteria(summary.criteriaLevel2Id, summary.criteriaLevel3Id)" class="criteria-tag d-inline-block">
        {{ summary.name }} <i class="ti-close ml-2 small"></i>
    </div>
</div>